<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心灵笔触</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/logout.js"></script>

    <style>
        login-dialog {
            width: 400px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }

        .login-dialog h1 {
            font-size: 30px;
            padding: 50px 0;
            text-align: center;
        }

        .login-dialog .row {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-dialog .row span {
            font-size: 19px;
            display: block;
            width: 100px;
            font-weight: 700;
        }

        .login-dialog .row input {
            width: 430px;
            height: 45px;
            line-height: 40px;
            font-size: 24px;
            border-radius: 10px;
            border: none;
            outline: none;
            text-indent: 10px;
        }

        .login-dialog button {
            width: 300px;
            height: 50px;
            color: white;
            background-color: black;
            border: none;
            border-radius: 10px;
        }

        .login-dialog button:active {
            background-color: #666;
        }

        #email::placeholder {
            font-size: 15px;
            /* 在这里设置所需的字体大小 */
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">用户信息管理</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list2.html">主页</a>
        <a href="javascript:logout()">退出</a>
        <!-- <a href="#">注销</a> -->
    </div>

    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img id="img" src="" class="avtar" alt="">
                <h3></h3>
                <input type="file" id="photo" accept="image/*" style="color:rgb(21, 107, 131);">
                <div class="counter">
                    <a onclick="upload()" style="cursor: pointer;">修改头像</a>
                </div>
                <div class="counter">
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="login-dialog">
                <h1>个人信息</h1>
                <div class="row">
                    <span>更新用户名</span>
                    <input type="text" id="username">
                </div>
                <br>
                <div class="row">
                    <span>邮箱</span>
                    <input type="text" id="email" placeholder="非必填">
                </div>
                <br>
                <div class="row">
                    <span>更新密码</span>
                    <input type="password" id="password">
                </div>
                <br>
                <div class="row">
                    <span>确认密码</span>
                    <input type="password" id="password2">
                </div>
                <br>
                <div class="row">
                    <button id="submit" onclick="mysub()">提 交</button>
                </div>
            </div>
        </div>
    </div>
    </div>


    </div>
    <script>
        var img = jQuery("#img");
        var imgUrl = "img/";
        // 初始化
        function init() {
            jQuery.ajax({
                url: "/user/photo",
                type: "GET",
                data: {},
                success: function (res) {
                    if (res.code == 200 && res.data != "") {
                        imgUrl += res.data;
                        img.attr('src', imgUrl);
                    } else if (res.data == "") {
                        img.attr('src', imgUrl + 'avatar.png');
                    } else {
                        alert("初始化失败" + res.msg);
                    }
                }
            });
        };
        init();

        // 提交用户修改信息
        function mysub() {
            // 1. 参数效验（获取到数据&非空效验&两次输入密码是否一致）
            var username = jQuery("#username");
            var email = jQuery("#email");
            var password = jQuery("#password");
            var password2 = jQuery("#password2");

            if (username.val().trim() == "") {       // trim() 去空格，jquery 提供的方法
                alert("用户名不能为空！");
                // 光标重置
                username.focus();
                return false;
            }
            if (password.val().trim() == "") {
                alert("请先输入密码！");
                password.focus();
                return false;
            }
            if (password2.val().trim() == "") {
                alert("请先输入确认密码！");
                password2.focus();
                return false;
            }
            if (password.val() != password2.val()) {     // 效验两次输入的密码是否一致
                alert("两次输入密码不一致,请检查！");
                password2.focus();
                return false;
            }

            // 2. 将数据提交给后端
            jQuery.ajax({
                url: "/user/updateuser",
                type: "POST",
                data: {
                    "username": username.val().trim(),
                    "password": password.val().trim(),
                    "email": email.val().trim()
                },
                // 3. 将后端返回的数据展示给用户
                success: function (res) {
                    if (res.code == 200 && res.data == 1) {
                        // 注册成功
                        alert("更新成功！");
                        // 跳转到登录页
                        location.href = "reader_list.html";
                    } else {
                        alert("抱歉，更新失败。" + res.msg);
                    }
                }
            })
        }


        // 上传头像
        function upload() {
            var photo = jQuery("#photo")[0].files[0];
            console.log(photo);

            if (photo == null) {
                alert("请先选择上传头像！");
                return false;
            }

            var formData = new FormData();
            formData.append('file', photo);

            jQuery.ajax({
                url: "/user/upload",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    if (res.code == 200 && res.data != null) {
                        alert("修改成功！");
                        location.href = location.href;
                    } else {
                        alert("修改失败" + res.msg);
                    }
                }
            });
        }
    </script>
</body>

</html>